<template>
  <div>
    <canvas ref="chart" class="chart-radar" :style="{'height': height + 'px'}"></canvas>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

export default ({
  props: [
    'data',
    'height',
  ],
  data() {
    return {
      chart: null,
    defaultHeight: 400
    };
  },
  mounted() {
    let ctx = this.$refs.chart.getContext("2d");

    this.chart = new Chart(ctx, {
      type: "radar",
      data: this.data,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
            labels: {
              font: {
                family: 'Arial',
                size: 12
              }
            }
          },
          tooltip: {
            bodyFont: {
              family: 'Arial',
              size: 12
            }
          }
        },
        scales: {
          r: {
            angleLines: {
              display: true,
              color: 'rgba(0, 0, 0, 0.1)'
            },
            suggestedMin: 0,
            ticks: {
              display: true,
              color: "#666",
              font: {
                family: 'Arial',
                size: 10
              }
            }
          }
        },
        elements: {
          line: {
            borderWidth: 3
          }
        }
      }
    });
  },
  beforeDestroy() {
    this.chart.destroy();
  },
  watch: {
    data: {
      handler(newData) {
        if (this.chart) {
          this.chart.data = newData;
          this.chart.update();
        }
      },
      deep: true
    }
  }
})
</script>

<style lang="scss" scoped>
.chart-radar {
  background: #fff;
  border-radius: 4px;
}
</style>